import React, { Component } from "react";
import { Tree, Modal, Table } from "antd";
import styles from "./DeptModal.less";

const { DirectoryTree } = Tree;

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  }
];

const data = [
  {
    key: "1",
    name: "张三",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "李四",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "网二",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  }
];

class DeptModal extends Component {
  state = {
    selectedRows: []
  };

  onChangeArea = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRows
    });
  };

  handleOk = () => {
    const { getPeople, onCancel } = this.props;
    getPeople(this.state.selectedRows);
    onCancel();
  };

  render() {
    const rowSelection = {
      onChange: this.onChangeArea
      // onSelect: (record, selected, selectedRows) => {
      //   console.log(record, selected, selectedRows);
      // },
      // onSelectAll: (selected, selectedRows, changeRows) => {
      //   console.log(selected, selectedRows, changeRows);
      // }
    };
    return (
      <div className={styles.root}>
        <Modal
          title="Basic Modal"
          width={800}
          visible={this.props.visible}
          onOk={this.handleOk}
          bodyStyle={{ height: 482 }}
          onCancel={this.props.onCancel}
        >
          <div
            style={{
              width: "100%",
              display: "flex",
              flexWrap: "wrap",
              justifyContent: "space-between"
            }}
          >
            <div
              style={{
                width: "22%",
                borderRightWidth: 1,
                overflowY: "scroll",
                flexWrap: "wrap",
                height: 438,
                borderRightColor: "rgba(0,0,0,0.15)",
                borderRightStyle: "solid"
              }}
            >
              <DirectoryTree
                multiple
                defaultExpandAll
                onSelect={this.onSelect}
                onExpand={this.onExpand}
              >
                <Tree.TreeNode title="上海" key="0-0">
                  <Tree.TreeNode title="黄浦" key="0-0-0" isLeaf>
                    <Tree.TreeNode title="司法" key="0-0-2" isLeaf />
                  </Tree.TreeNode>
                  <Tree.TreeNode title="静安" key="0-0-1" isLeaf />
                </Tree.TreeNode>
                <Tree.TreeNode title="广东" key="0-1">
                  <Tree.TreeNode title="广州" key="0-1-0" isLeaf />
                  <Tree.TreeNode title="番禺" key="0-1-1" isLeaf />
                </Tree.TreeNode>
              </DirectoryTree>
            </div>
            <div style={{ width: "76%" }}>
              <Table
                columns={columns}
                dataSource={data}
                rowSelection={rowSelection}
              />
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default DeptModal;
